<template>
  <div class="account">
    <el-container>
      <el-header>
        <el-breadcrumb>
          <el-breadcrumb-item>商品维护</el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>新增商品</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="130px"
          class="demo-ruleForm"
        >
          <el-form-item label="商品ID" prop="prdtId">
            <el-col :span="15">
              <el-input v-model="ruleForm.prdtId" size="small"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="商品供应商" prop="prdtSupplier">
            <el-col :span="15">
              <el-select
                v-model="ruleForm.prdtSupplier"
                size="small"
                placeholder="供应商所在省份"
                @change="updateProvince"
              >
                <el-option
                  v-for="(item, index) in area"
                  :key="index"
                  :value="item.name"
                >{{item.name}}</el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="商品名称" prop="prdtName">
            <el-col :span="15">
              <el-input v-model="ruleForm.prdtName" size="small"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="商品类别" required>
            <el-col :span="4">
              <el-form-item prop="prdtType1">
                <el-select
                  v-model="ruleForm.prdtType1"
                  size="small"
                  placeholder="供应商所在省份"
                  @change="updateProvince"
                >
                  <el-option
                    v-for="(item, index) in area"
                    :key="index"
                    :value="item.name"
                  >{{item.name}}</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="margin: 0 10px">
              <el-form-item prop="prdtType2">
                <el-select
                  v-model="ruleForm.prdtType2"
                  placeholder="供应商所在市"
                  size="small"
                  @change="updateCity"
                >
                  <el-option
                    v-for="(item, index) in cityArr"
                    :key="index"
                    :value="item.name"
                  >{{item.name}}</el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="商品适用门店" prop="prdtGruop">
            <el-col :span="15">
              <el-select
                v-model="ruleForm.prdtGruop"
                placeholder="供应商所在市"
                size="small"
                @change="updateCity"
              >
                <el-option
                  v-for="(item, index) in cityArr"
                  :key="index"
                  :value="item.name"
                >{{item.name}}</el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="商品有效期" prop="prdtValid">
            <el-col :span="15">
              <el-input v-model="ruleForm.prdtValid" size="small"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="支付方式" prop="prdtPay">
            <el-col :span="15">
              <el-radio-group v-model="ruleForm.prdtPay">
                <el-radio label="现金"></el-radio>
                <el-radio label="积分"></el-radio>
                <el-radio label="现金+积分"></el-radio>
              </el-radio-group>
            </el-col>
          </el-form-item>
          <el-form-item label="商品价格" prop="prdtPrice">
            <el-col :span="15">
              <el-input v-model="ruleForm.prdtPrice" size="small"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="商品秒杀" prop="prdtSekill">
            <el-col :span="15">
              <el-radio-group v-model="ruleForm.prdtSekill">
                <el-radio label="开启"></el-radio>
                <el-radio label="关闭"></el-radio>
              </el-radio-group>
            </el-col>
          </el-form-item>
          <el-form-item label="实时退货" prop="prdtBack">
            <el-col :span="15">
              <el-radio-group v-model="ruleForm.prdtBack">
                <el-radio label="支持"></el-radio>
                <el-radio label="不支持"></el-radio>
              </el-radio-group>
            </el-col>
          </el-form-item>
          <el-form-item label="图片上传" prop="prdtImage">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :file-list="ruleForm.prdtImage"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="商品描述1">
            <el-col :span="15">
              <el-input type="textarea" v-model="ruleForm.prdtNote1" size="small"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="商品描述2">
            <el-col :span="15">
              <el-input type="textarea" v-model="ruleForm.prdtNote2" size="small"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="商品描述3">
            <el-col :span="15">
              <el-input type="textarea" v-model="ruleForm.prdtNote3" size="small"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="商品描述4">
            <el-col :span="15">
              <el-input type="textarea" v-model="ruleForm.prdtNote4" size="small"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="商品描述5">
            <el-col :span="15">
              <el-input type="textarea" v-model="ruleForm.prdtNote5" size="small"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="商品描述6">
            <el-col :span="15">
              <el-input type="textarea" v-model="ruleForm.prdtNote6" size="small"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="商品描述7">
            <el-col :span="15">
              <el-input type="textarea" v-model="ruleForm.prdtNote7" size="small"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="商品描述8">
            <el-col :span="15">
              <el-input type="textarea" v-model="ruleForm.prdtNote8" size="small"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="商品描述9">
            <el-col :span="15">
              <el-input type="textarea" v-model="ruleForm.prdtNote9" size="small"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="商品描述10">
            <el-col :span="15">
              <el-input type="textarea" v-model="ruleForm.prdtNote10" size="small"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        prdtId: "",
        prdtSupplier: "",
        prdtName: "",
        prdtType1: "",
        prdtType2: "",
        prdtGruop: "",
        prdtValid: "",
        prdtPay: "",
        prdtPrice: "",
        prdtSekill: "",
        prdtBack: "",
        prdtImage: [],
        prdtNote1: "",
        prdtNote2: "",
        prdtNote3: "",
        prdtNote4: "",
        prdtNote5: "",
        prdtNote6: "",
        prdtNote7: "",
        prdtNote8: "",
        prdtNote9: "",
        prdtNote10: "",
      },
      rules: {
        prdtSupplier: [
          { required: true, message: "请输入商品供应商", trigger: "change" }
        ],
        prdtName: [
          { required: true, message: "请输入商品名称", trigger: "blur" }
        ],
        prdtType1: [
          { required: true, message: "请选择商品类别", trigger: "change" }
        ],
        prdtType2: [
          { required: true, message: "请选择商品类别", trigger: "change" }
        ],
        prdtGruop: [
          { required: true, message: "请选择商品适用门店组", trigger: "change" }
        ],
        prdtValid: [
          { required: true, message: "请填写商品有效日期", trigger: "change" }
        ],
        prdtPay: [
          { required: true, message: "请选择支付方式", trigger: "change" }
        ],
        prdtPrice: [
          { required: true, message: "请填写商品价格", trigger: "blur" }
        ],
        prdtSekill: [
          {
            required: true,
            message: "请选择商品是否开启秒杀",
            trigger: "change"
          }
        ],
        prdtBack: [
          {
            required: true,
            message: "请选择商品是否支持实时退货",
            trigger: "change"
          }
        ],
        prdtImage: [{ required: true, message: "请上传商品相关图片" }]
      },
      area: [
        {
          name: "北京",
          sub: [
            {
              name: "北京",
              sub: ["大兴区", "东城区", "朝阳区"]
            }
          ]
        },
        {
          name: "四川省",
          sub: [
            {
              name: "成都市",
              sub: ["双流区", "新都区", "成华区", "高新区", "青羊区", "锦江区"]
            },
            {
              name: "遂宁市",
              sub: ["船山区", "大英县", "安居区", "射洪县", "蓬溪县"]
            },
            {
              name: "自贡市",
              sub: ["大安区", "自流井区", "贡井区", "沿滩区", "荣县", "富顺区"]
            },
            {
              name: "泸州市",
              sub: [
                "江阳区",
                "纳溪区",
                "龙马潭区",
                "泸县",
                "合江县",
                "叙永县",
                "古蔺区"
              ]
            }
          ]
        },
        {
          name: "广东省",
          sub: [
            {
              name: "广州市",
              sub: ["越秀区", "荔湾区", "天河区", "海珠区", "黄埔区"]
            },
            {
              name: "深圳市",
              sub: ["福田区", "南山区", "宝安区", "龙岗区"]
            },
            {
              name: "珠海市",
              sub: ["香洲区", "金湾区"]
            },
            {
              name: "汕头市",
              sub: ["金平区", "濠江区", "潮南区", "龙湖区"]
            },
            {
              name: "佛山市",
              sub: ["禅城区", "三水区", "南海区"]
            }
          ]
        },
        {
          name: "上海市",
          sub: [
            {
              name: "上海市",
              sub: [
                "普陀区",
                "静安区",
                "杨浦区",
                "黄浦区",
                "南汇区",
                "嘉定区",
                "徐汇区"
              ]
            }
          ]
        }
      ],
      province: [],
      cityArr: [],
      countyArr: []
    };
  },
  methods: {
    // 省市区三级联动
    updateProvince(val) {
      this.ruleForm.city = "";
      this.ruleForm.county = "";
      this.cityArr = [];
      this.countyArr = [];
      this.area.map(e => {
        if (val === e.name) {
          this.cityArr = e.sub;
        }
      });
    },
    updateCity(val) {
      this.ruleForm.county = "";
      this.countyArr = [];
      this.cityArr.map(e => {
        if (val === e.name) {
          this.countyArr = e.sub;
        }
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>

<style scoped>
.account .el-header {
  height: 60px;
  border-bottom: 1px solid #f3f3f3;
}
.el-breadcrumb {
  height: 60px;
  line-height: 60px;
}
.main-header {
  text-align: center;
  align-items: center;
  display: flex;
}
.main-header >>> .el-input {
  width: 200px;
  margin-right: 20px;
}
.main-content {
  margin: 40px;
}
.el-footer {
  margin: 0 auto;
}
</style>